<template>
<div class="container-cc">
  <div class="order">订单编号：{{ orderId }}</div>
  <div class="info">
    <img class="mess-image" :src="coverImage" alt="">
    <div class="info-right">
      <div class="title">{{ title }}</div>
      <div class="fenshu">
        <div class="count">×{{ count }}</div>
        <div class="lasthang">
          <div class="score">总积分： {{ totalScore }}</div>
        </div>
      </div>
    </div>
  </div>
    <div class="time">下单时间：{{ orderTime }}</div>
</div>
</template>
 
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue'
import { orderInfo } from '@/api/personalCenter';
import { showToast, showDialog } from 'vant';

const router = useRouter()
const gift = ref({})
const title = ref('')
const coverImage = ref('')
const detailImage = ref('')
const count = ref('')
const orderId = ref('')
const totalScore = ref('')
const orderTime = ref('')

const getDetail = () => {
  orderInfo(router.currentRoute.value.query.id).then((res) => {
  if (res.code === 200) {
      gift.value = res.data
      title.value = gift.value.spdb_scgl_gift.title
      count.value = gift.value.count
      orderTime.value = gift.value.orderTime
      totalScore.value = gift.value.count * gift.value.spdb_scgl_gift.score
      orderId.value = gift.value.orderId
      if(JSON.parse(gift.value.spdb_scgl_gift.coverImage).length>0){
        coverImage.value = process.env.VITE_API_API_IMAGE_URL + JSON.parse(gift.value.spdb_scgl_gift.coverImage)[0].url
      }
    } else {
      showToast(res.msg)
    }
  }).catch((err) => {
    console.log(err)
  })
}

onMounted(() => {
  getDetail()
  
})

</script>
 

<style lang="scss" scoped>
.container-cc {
  background: #fff;
  overflow: hidden;
  padding: 2rem 1.4rem;
  box-sizing: border-box;
  height: 100%;
}
.order{
  font-size: 1.4rem;
  color: #333;
  border-bottom: 1px solid #ccc;
  padding-bottom: 2rem;
}
.info{
  display: flex;
  justify-content: space-between;
}
.mess-image{
    width:  50%;
    height: 120px;
}
.info-right{
    width: 46%;
    text-align: right;
}

.title{
    font-size: 1.4rem;
    margin: 1rem 0;
    text-align: left;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.count{
  text-align: left;
  color: #666;
  font-size: 1.4rem;
}
.score{
  color: red;
  font-size: 1.6rem;
}
.jifen{
  font-size: 1.2rem;
  color: #ccc;
}
.fenshu{
  display: flex;
  justify-content: space-between;
  margin-top: 5rem;
}
.info{
  border-bottom: 1px solid #ccc;
  padding-bottom: 1rem;
}
.time{
  font-size: 1.4rem;
  color: #333;
  margin-top: 2rem;
}
</style>